<template>
  <div class="dashboard-container">
    <Navbar />
    <!-- 统计卡片区 -->
    <div class="stats-wrapper">
      <div class="card-grid">
        <div
            v-for="card in statsCards"
            :key="card.title"
            class="stat-card"
            :style="`--card-accent: ${card.color}`"
        >
          <div class="card-bg"></div>
          <div class="card-content">
            <div class="card-icon">
              <i :class="`fas ${card.icon}`"></i>
            </div>
            <div class="card-text">
              <h3 class="stat-value">{{ card.value }}</h3>
              <p class="stat-title">{{ card.title }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 管理区域 -->
<!--    <div class="management-layout">-->
      <!-- 树形结构面板 -->
<!--      <div class="tree-panel">-->
<!--        <div class="panel-header">-->
<!--          <h2>餐厅结构管理</h2>-->
<!--          <button class="primary-btn icon-btn" @click="showRestaurantDialog">-->
<!--            <i class="fas fa-plus"></i>-->
<!--            <span>新建餐厅</span>-->
<!--          </button>-->
<!--        </div>-->
<!--        <RestaurantTree-->
<!--            :restaurants="processedRestaurants"-->
<!--            @node-click="handleNodeClick"-->
<!--            class="tree-container"-->
<!--        />-->
<!--      </div>-->

      <!-- 数据表格面板 -->
      <div class="table-panel">
        <!-- 在父组件中传递数据时 -->
        <RestaurantTable
            :data="processedRestaurants"
            :departments="departments"
            :restaurants="rawRestaurants"
        />
      </div>
    </div>

    <!-- 弹窗组件 -->
    <RestaurantDialog
        :visible="dialogVisible"
        :data="selectedRestaurant"
        @close="dialogVisible = false"
    />
<!--  </div>-->
</template>

<script setup>
/* 原有逻辑保持不变 */
import { ref, computed, onMounted } from 'vue'
import {
  getRestaurants,
  getAllDepartments,
  getAllDishes,

} from '@/api/index.js'
import RestaurantTree from './RestaurantTree.vue'
import RestaurantTable from './RestaurantTable.vue'
import RestaurantDialog from './RestaurantDialog.vue'
import Navbar from "@/components/Common/Navbar.vue";

const currentPage = ref(1)
const dialogVisible = ref(false)
const selectedRestaurant = ref(null)
const rawRestaurants = ref([])
const departments = ref([])
const dishes = ref([])

const isLoading = ref(false)
const MAX_RETRIES = 3; // 最大重试次数
const retryCount = ref(0); // 当前重试次数
const loadData = async () => {
  if (isLoading.value || retryCount.value >= MAX_RETRIES) return;

  isLoading.value = true;
  try {
    const [restRes, deptRes, dishRes] = await Promise.all([
      getRestaurants({ with_stats: true }),
      getAllDepartments(),
      getAllDishes()
    ]);

    // 一次性更新所有数据
    rawRestaurants.value = restRes.data;
    departments.value = deptRes.data;
    dishes.value = dishRes.data;

    retryCount.value = 0; // 成功则重置重试计数器
  } catch (error) {
    console.error(`数据加载失败 (尝试 ${retryCount.value + 1}/${MAX_RETRIES}):`, error);

    retryCount.value += 1;
    if (retryCount.value < MAX_RETRIES) {
      // 延迟1秒后重试
      setTimeout(loadData, 1000);
    } else {
      alert('数据加载失败，请检查网络连接后刷新页面重试');
    }
  } finally {
    isLoading.value = false;
  }
}

onMounted(loadData)
// loadData()
// 统计卡片数据
const statsCards = computed(() => [
  {
    title: '餐厅总数',
    value: rawRestaurants.value.length,
    icon: 'fa-store',
    color: '#3b82f6'
  },
  {
    title: '部门总数',
    value: departments.value.length,
    icon: 'fa-sitemap',
    color: '#10b981'
  },
  {
    title: '菜品总数',
    value: dishes.value.length,
    icon: 'fa-utensils',
    color: '#f59e0b'
  },
  {
    title: '员工总数',
    value: 0, // 根据实际接口添加
    icon: 'fa-users',
    color: '#8b5cf6'
  }
])

const processedRestaurants = computed(() => {
  // 添加空数据检查
  if (!rawRestaurants.value.length || !departments.value.length || !dishes.value.length) {
    return []
  }

  return rawRestaurants.value.map(restaurant => {
    const relatedDepartments = departments.value.filter(
        d => d.restaurantId === restaurant.id
    )

    return {
      ...restaurant,
      departments: relatedDepartments.map(department => ({
        ...department,
        dishes: dishes.value.filter(
            dish => dish.departmentId === department.id
        )
      }))
    }
  })
})

// 事件处理
const handleNodeClick = (node) => {
  selectedRestaurant.value = node
  dialogVisible.value = true
}

const showRestaurantDialog = () => {
  selectedRestaurant.value = null
  dialogVisible.value = true
}

</script>

<style scoped>
.dashboard-container {
  --radius-lg: 12px;
  --spacing: 1.5rem;
  --shadow: 0 4px 24px rgba(0,0,0,0.08);

  padding: var(--spacing);
  background: #f8fafc;
  min-height: 100vh;
}

.stats-wrapper {
  margin-bottom: var(--spacing);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--spacing);
}

.stat-card {
  --icon-size: 2.5rem;

  position: relative;
  background: white;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  overflow: hidden;
  transition: transform 0.2s ease;
  box-shadow: var(--shadow);
}

.stat-card:hover {
  transform: translateY(-4px);
}

.card-bg {
  position: absolute;
  top: -40%;
  right: -10%;
  width: 120%;
  height: 180%;
  background: linear-gradient(
      45deg,
      var(--card-accent) 0%,
      rgba(var(--card-accent-rgb), 0.2) 100%
  );
  opacity: 0.1;
  pointer-events: none;
}

.card-content {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.card-icon {
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--card-accent-rgb), 0.1);

  i {
    color: var(--card-accent);
    font-size: calc(var(--icon-size) * 0.6);
  }
}

.card-text {
  .stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--card-accent);
    margin: 0;
  }

  .stat-title {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0.25rem 0 0;
  }
}

/* 修改原有CSS */
.management-layout {
  display: block; /* 从grid改为块级布局 */
  width: 100%;
}


.tree-panel {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 2rem;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding: 0.5rem;

  h2 {
    font-size: 1.2rem;
    margin: 0;
    color: #1e293b;
  }
}


.table-panel {
  width: 100%;
  margin: 0 auto;
  max-width: 1200px; /* 添加最大宽度限制 */
  transition: width 0.3s ease;

  /* 新增响应式处理 */
  @media (min-width: 1600px) {
    max-width: 1400px;
  }
  @media (max-width: 768px) {
    border-radius: 0;
    box-shadow: none;
  }
}

/* 添加表格容器优化 */
.table-container {
  overflow: visible; /* 移除滚动条容器 */

  ::v-deep .el-table {
    width: 100% !important;

    /* 列宽优化 */

    .name-column {
      min-width: 200px;
      max-width: 300px;
    }

    .status-column {
      width: 120px;
    }

    .operation-column {
      width: 180px;
    }
  }
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;

  i {
    font-size: 0.9em;
  }
}

@media (max-width: 1200px) {
  .table-panel {
    padding: 0 16px;

    ::v-deep .el-table {
      /* 移动端隐藏次要列 */
      .date-column,
      .status-column {
        display: none;
      }
    }
  }
}

@media (max-width: 768px) {
  .table-panel {
    padding: 0;

    ::v-deep .el-table {
      /* 紧凑模式调整 */
      th, td {
        padding: 8px 4px;
      }
    }
  }
}
</style>